<template>
	<div style="display: flex;height: 100%;">
		<el-aside width="224px" style="background-color: rgb(238, 241, 246);padding: 5px 10px;">
			<el-input placeholder="请输入单位分类名称" style='margin:10px 0'></el-input>
			<el-tree :data='data2' node-key='id' @node-click="handleClick" ref='tree1' highlight-current :props='defaultProps3' >
			</el-tree>
			<br />
			<el-tree :data='data3' node-key='id'  @node-click="handleClick2" ref='tree2' highlight-current :props='defaultProps3'>
			</el-tree>
		</el-aside>
		<el-container>
			<div style="margin: 30px;">
				<el-form :inline="true" :model="ruleForm" class="demo-form-inline">
					<el-form-item label="适用行业">
						<el-select v-model='ruleForm.allTrade' placeholder="请选择">
							<el-option value='' style='display: none;'></el-option>
							<el-tree :data='data1' @node-click="handleClick3" node-key='id' ref='tree3' highlight-current :props='defaultProps'>
							</el-tree>
						</el-select>
					</el-form-item>
					<el-form-item label="行政区域">
						<el-select v-model='ruleForm.provinceId'>
							<el-option v-for="item in place1" :key="item.key" :label="item.name" :value="item.key">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-select v-model="ruleForm.cityId">
							<el-option v-for="item in place2" :key="item.key" :label="item.name" :value="item.key">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="社会信用代码或名称">
						<el-input v-model="ruleForm.queryKey"></el-input>
					</el-form-item>
					<el-form-item style='float: right;'>
						<el-button type="primary" @click="search" :disabled='flag'>搜索</el-button>
						<el-button type="primary">全部</el-button>
						<el-button type="primary">导出</el-button>
					</el-form-item>
				</el-form>
				<el-table :data="tableData3" height="500" border style="width: 100%" v-loading='loadingFlag'>
					<el-table-column type='index' :index="indexMethod" label="序号" align='center' width="80">
					</el-table-column>
					<el-table-column prop="name" align='center' label="单位名称">
					</el-table-column>
					<el-table-column prop="creditNo" align='center' label="社会信息用代码">
					</el-table-column>
					<el-table-column prop="businessName" align='center' width="180" label="所属行业">
					</el-table-column>
					<el-table-column align="center" label="操作" width='100'>
						<template slot-scope="scope">
							<el-button @click='goDetail(scope.row)'>详情</el-button>
						</template>
					</el-table-column>
				</el-table>
	             <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-size='20' layout="total,sizes,prev,pager,next,jumper" :total="total"></el-pagination>
				
			</div>
		</el-container>
		</el-container>
	</div>
</template>
<script>
	import {mapState,mapActions} from 'vuex'
	import MD5 from 'md5'
	export default {
		data() {
			return {
				value1:'',
				ruleForm: {
					companyType: '',
					allTrade: '',
					place2: '',
					typeId: '',
					businessId: '',
					id: '',
					queryKey: '',
					provinceId: '',
					cityId: ''
				},
				flag:false,
				loadingFlag:false,
				defaultProps: {
					children: 'children',
					label: 'text'
				},
				defaultProps3: {
					children: 'children',
					label: 'name'
				},
				data1: [],
				data2: [],
				data3: [],
				companyType1: [],
				place1: [],
				place2: [],
				currentPage: 1,
				total: 0,
				limit: 20,
				checked: false,
				tableData3: []
			}
		},
		watch: {
			'ruleForm.provinceId': function(newV, oldV) {
				this.getCitys(newV)
			}
		},
		methods: {
			search(){
				this.flag=true
				this.getSearch()
			},
			indexMethod(index){
    			return this.limit*(this.currentPage-1)+index+1
	    	},
	    	handleSizeChange(val){
	    		this.limit = val
	    		this.getSearch()
	    	},
	    	handleCurrentChange(val){
	    		this.currentPage = val
	    		this.getSearch()
	    	},
			handleClick(data,){
				this.ruleForm.id=data.id
			},
			handleClick2(data){
				
				this.ruleForm.queryKey=data.name
			},
			handleClick3(data){
				this.ruleForm.typeId=data.id
				this.ruleForm.allTrade=data.text
			},
			getCompanyType() {
				var that = this
				this.$ajax({
						url: localStorage.getItem('ApiUrl')+'/enterprise/queryCompanyTypeTree.do',
						method: 'get',
						dataType: 'json',
						headers: {
							'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
						}
					})
					.then(function(res) {
						let obj = res.data
						if(obj.respCode == '000') {
							that.companyType1 = obj.dataObj[0].children
							
							that.data2 = obj.dataObj
							
						} 
					})
			},

			getCompany() {
				var that = this
				this.$ajax({
						url: localStorage.getItem('ApiUrl')+'/enterprise/initCompanyTree.do?id=1&typeId=1&isValid=1',
						method: 'get',
						dataType: 'json',
						headers: {
							'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
						}
					})
					.then(function(res) {
						let obj = res.data
						if(obj.respCode == '000') {
							that.$ajax({
									url: localStorage.getItem('ApiUrl')+'/enterprise/loadCompanyTree.do?pId=1&typeId=' + obj.dataObj[0].typeId + '&isValid=1&start=0&rows=' + obj.dataObj[0].count,
									method: 'get',
									dataType: 'json',
									headers: {
										'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
									}
								})
								.then(function(res) {
									let obj2 = res.data
									if(obj2.respCode == '000') {
										obj.dataObj[0].children = obj2.dataObj
										that.data3 = obj.dataObj
										that.restaurants = obj.dataObj[0].children
										
									}
								})

						}
					})
			},
			getCitys(id) {
				var that = this
				this.$ajax({
						url: localStorage.getItem('ApiUrl')+'/enterprise/queryRegionByPid.do?key=' + id,
						method: 'get',
						dataType: 'json',
						headers: {
							'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
						}
					})
					.then(function(res) {
						let obj = res.data
						if(obj.respCode == '000') {
							var str = JSON.parse(obj.dataObj)
							var arr = []
							for(var value in str) {
								var obj2 = {
									'key': value,
									'name': str[value]
								}
								arr.push(obj2)
							}
							
							if(id == '100000') {
								that.place1 = arr
							} else {
								that.place2 = arr
							}
						}
					})
			},
			getAllTrade() {
				var that = this
				this.$ajax({
						url: localStorage.getItem('ApiUrl')+'/enterprise/queryBussinessTree.do',
						method: 'get',
						dataType: 'json',
						headers: {
							'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
						}
					})
					.then(function(res) {
						let obj = res.data
						if(obj.respCode == '000') {
							var str = JSON.stringify(obj.dataObj)
							that.data1 = JSON.parse(str)
							//					
						}
					})
			},
			goDetail(obj) {
				this.$store.commit('changeDetailMessage',obj)
				
				this.$router.push('basicMessage')
			},
			getSearch() {
				this.loadingFlag=true
				let param = {
					'typeId': this.ruleForm.typeId, //单位类型
					'businessId': this.ruleForm.businessId,
					'id': this.ruleForm.id,
					'queryKey': this.ruleForm.queryKey,
					'provinceId': this.ruleForm.provinceId,
					'cityId': this.ruleForm.cityId,
					'num': this.limit,
					'page': this.currentPage
				}
				console.log(param)
				let that = this
				var str=''
				Object.keys(param).forEach(function(key) {
					if(param[key] == '' || (!param[key])) {
						delete param[key]
					}else{
						str+=key+'='+param[key]+'&'
					}
				})
				this.$ajax({
						url: localStorage.getItem('ApiUrl')+'/enterprise/queryCompany.do?'+str,
						method: 'get',
						headers: {
							'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
						}
				})
					.then(function(res) {
						that.flag=false
					    that.loadingFlag=false
						let obj = res.data
						if(obj.respCode == '000') {
							
							that.tableData3 = obj.dataObj[0].rows
							that.total = obj.dataObj[0].total

						} else {
							that.$message({
								message: obj.message,
								duration: 5000
							})
						}
					})
					.catch((err) => {
						console.log(err)
					})
			}
			
		},
		mounted() {
			this.getCompanyType()
			this.getAllTrade()
			this.getCitys(100000)
			this.getCompany()
		}
	};
</script>
<style scoped="scoped">
	.el-form-item__label {
		width: 90px;
	}
	
	.el-header {
		background-color: #B3C0D1;
		color: #333;
		line-height: 60px;
	}
	
	.el-aside {
		color: #333;
	}
	
	.nav-contaner {
		display: flex;
	}
</style>
